<template>
	<view class="chapter-item" :class="{ 'line' : line }" @click="toInfo">
		<view class="iconfont f-s-16 up-info">&#xe661;</view>
		<view class="u-flex-1 u-m-l-24">
			<view class=" up-flex up-flex-between up-m-b-20 up-flex-items-center">
				<view>
					<view class="_title">{{ info.name }}</view>
					<view class="_desc">共 {{ info.quantity }}题</view>
				</view>
				<view>
					<up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="up-flex up-flex-items-center">
				<up-line-progress :height="4" activeColor="#165DFF" :percentage="info.percent"
					:showText="false"></up-line-progress>
				<view class="f-s-12 up-info u-m-l-40">{{ info.completedQuantity || 0 }}/{{ info.quantity }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import Func from '@/utils/common.js'

	const props = defineProps({
	
		line: {
			type: Boolean,
			default: true
		},
		info: {
			type: Object,
			default: () => ({})
		}
	})

	const toInfo = () => {
		if (props.info.quantity === 0) {
			Func.toast('暂无题库')
			return
		}
		uni.navigateTo({
			url: `/subPackages/subject/info?id=${props.info.id}`
		})
	}
</script>

<style scoped lang="scss">
	.chapter-item {
		display: flex;
		align-items: baseline;
		padding: 16px 6px;

		&.line {
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
		}

		._title {
			font-size: 16px;
			font-weight: bold;
			color: #1D2129;
		}

		._desc {
			margin-top: 6px;
			font-size: 12px;
			color: #86909C;
		}
	}
</style>